<template>
	<view class="container">
		<view class="list" @click="goSetpaypassword" v-if="!userInfo.paymentPassword">
			<view class="lf lf-between lf-center">
				<view class="xjs-pl-32">
					<view class="xjs-size-32">设置支付密码</view>
					<view class="xjs-mt-16 xjs-size-26 text-color-1">添加支付密码</view>
				</view>
				<uni-icons class="xjs-mr-32" type="right" size="20"></uni-icons>
			</view>
		</view>
		<view v-else>
			<view class="list"  @click="goupdataPaypassword">
				<view class="lf lf-between lf-center">
					<view class="xjs-pl-32">
						<view class="xjs-size-32">修改支付密码</view>
						<view class="xjs-mt-16 xjs-size-26 text-color-1">记得原密码</view>
					</view>
					<uni-icons class="xjs-mr-32" type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="list" @click="goupdataPaypassword1">
				<view class="lf lf-between lf-center">
					<view class="xjs-pl-32">
						<view class="xjs-size-32">忘记支付密码</view>
						<view class="xjs-mt-16 xjs-size-26 text-color-1">不记得原密码</view>
					</view>
					<uni-icons class="xjs-mr-32" type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
	import { reactive } from 'vue';
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { updateUserInfo } from '@/hooks/useLogin'
	const { userInfo} = useUserStoreToRefs()
	const goSetpaypassword = async () => {
		uni.navigateTo({
			url:'/pages/myStudio/studio/setPaymentPassword/index'
		})
	}
	const goupdataPaypassword = async () => {
		uni.navigateTo({
			url:'/pages/myStudio/studio/changePaymentPassword/index'
		})
	}
	const goupdataPaypassword1 = async () => {
		uni.navigateTo({
			url:'/pages/myStudio/studio/verifyPhoneNumber/index'
		})
	}
	onShow(()=>{
		updateUserInfo()
	})
</script>

<style lang="scss" scoped>
	.lf {
		display: flex;
	}

	.lf-between {
		justify-content: space-between;
	}

	.lf-center {
		align-items: center;
	}
	.text-color-1{
		color:#7C807F;
	}
	.container {
		padding-bottom: var(--safe-area-bottom);
	}

	.list {
		font-size: 30rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		margin:32rpx;
		padding: 40rpx 0;
	}

	.btn_box {
		width: 686rpx;
		margin-top: 40rpx;
		margin-left: 32rpx;
	}
</style>